---
layout: example
categories: example/v1.0.0
version: v1.0.0
title: Imported data with custom tooltips
description: After a `ready` event customize tooltips bound to features based on GeoJSON data.
tags:
  - features
  - omnivore
---
<script src='{{site.tileApi}}/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>

<div id='map'></div>

<script>
var map = L.mapbox.map('map', 'mapbox.streets');

// omnivore will AJAX-request this file behind the scenes and parse it:
// note that there are considerations:
// - The file must either be on the same domain as the page that requests it,
//   or both the server it is requested from and the user's browser must
//   support CORS.
var runLayer = omnivore.kml('{{site.baseurl}}/assets/data/line.kml')
    .on('ready', function() {
        map.fitBounds(runLayer.getBounds());

        // After the 'ready' event fires, the GeoJSON contents are accessible
        // and you can iterate through layers to bind custom popups.
        runLayer.eachLayer(function(layer) {
            // See the `.bindPopup` documentation for full details. This
            // dataset has a property called `name`: your dataset might not,
            // so inspect it and customize to taste.
            layer.bindPopup(layer.feature.properties.name);
        });
    })
    .addTo(map);
</script>
